Day21 監聽match

2023 iThome 鐵人賽

DAY 21

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 21 篇

15th鐵人賽

jenny

2023-10-06 01:04:56

375 瀏覽

分享至

今天我要來跟大家聊聊 Vue.js 中的 watch，這是一個有用的功能，特別對於要寫前端的人來說。
首先，Vue.js 是一個用來建立交互式的網頁應用程式的 JavaScript 框架。
而 watch 是 Vue.js 中的一個功能，用來監視數據的變化。
這就意味著想要追蹤一個變數或屬性的變化時，你可以使用 watch。

一開始，我們需要在 Vue 的實例中定義一個名為 watch 的對象，
然後在這個對象中指定你想要監視的屬性，以及當屬性變化時要執行的操作。例如：
Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Watch Example</title>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

</body>
</html>

js:

new Vue({
  data: {
    message: 'Hello！'
  },
  watch: {
    message: function(newMessage, oldMessage) {
      console.log('新訊息: ' + newMessage);
      console.log('舊訊息: ' + oldMessage);
    }
  }
});

這個例子中，我們監視了一個叫做 message 的屬性，並且當它變化時，我們會在控制台輸出新的值和舊的值。

而在 HTML 中，我們只需要顯示這個 message 屬性，不需要額外的程式碼。
Vue 會自動更新 HTML 中的內容，當 message 屬性發生變化時。

總結一下，watch 是一個 Vue.js 中非常有用的功能，它可以幫助我們追蹤數據的變化，並在變化時執行相應的操作。這是一個必須要學會的技巧，因為可以讓前端應用更加靈活和互動性更強。